<template>
    <div>
        <div>

            <ItemMusicTop :playlist="playlist" />
            <ItemMusicList :itemList="itemList" :subscribedCount="subscribedCount" />
        </div>
        <div class="footer">
            <FooterMusic :style="onStyle" />
        </div>

    </div>
</template>

<script>
import FooterMusic from '@/views/Item/FooterMusic.vue'
import ItemMusicTop from '@/views/Item/ItemMusicTop.vue'
import ItemMusicList from '@/views/Item/ItemMusicList.vue'
import { ItemMusicAPI } from '@/api'
export default {
    data() {
        return {
            playlist: {},
            itemList: [],
            subscribedCount: {},
            onStyle: { bottom: '0px' },
        }
    },
    components: {
        ItemMusicTop, ItemMusicList, FooterMusic
    },
    async mounted() {

        const res = await ItemMusicAPI(this.$route.query.id)
        this.playlist = res.data.playlist;
        this.itemList = res.data.playlist.tracks;

        this.subscribedCount = res.data.playlist.subscribedCount


    },
    created() {
        window.onload = function () {

        };
    }
}
</script>

<style lang="less" scoped>
.footer {
    bottom: 0px;
    position: fixed;
}
</style>